<template>
  <div id="modifying">
    <img src="@/assets/img/icon_xgtx_xggrzl.png" alt class="userHeader">
    <div class="nickName">
      <img src="@/assets/img/icon_xggrzl_nc.png" alt>
      <input type="text" placeholder="请输入修改后的昵称" v-model="nickname">
    </div>
    <div class="sub" @click="sub">确认修改</div>
  </div>
</template>

<script>
export default {
  name: "modifying",
  data() {
    return {
      nickname: ""
      /*header:""*/
    };
  },
  methods: {
    sub() {
      let that = this;
      that.$toast.loading("加载中...")
      var Sukdata = {
        userId: localStorage.getItem("userid"),
        name: that.nickname
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/user/changeName", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              that.$toast.success({
                message:'修改成功！'
              })
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    }
  }
};
</script>

<style scoped>
.userHeader {
  display: block;
  width: 20%;
  margin: 0 auto;
  margin-top: 20px;
}
.nickName {
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  margin-top: 20px;
}
.nickName > img {
  display: block;
  width: 20px;
  float: left;
  margin-left: 5%;
  vertical-align: middle;
}
.nickName > input {
  margin-left: 5%;
  width: 50%;
  font-size: 16px;
  border: 0;
  outline: none;
  vertical-align: middle;
}
.sub {
  width: 90%;
  margin: 0 auto;
  height: 45px;
  line-height: 45px;
  color: #fff;
  text-align: center;
  border-radius: 20px;
  background: #ff2f4e;
  font-size: 18px;
  margin-top: 80px;
}
</style>
